<template>
  <div class="index-conntainer">
     <div class="content"> 
       <el-row :gutter="10">         
         <!-- 左边管理员-->
         <el-col :span="9" v-if="isRoot">
           <el-card class="box-card">
               <template #header>
                 <div class="card-header">
                   <span>商家列表</span> 
                 </div>
               </template>
                <merchant @choose="chooseCallback"></merchant>
             </el-card>
           
                    
         </el-col>
         
         <!-- 右边商家 -->
         <el-col :span="isRoot?13:24">           
           <!-- 查询条件 -->
           <div class="search-container">
             <el-form ref="queryFormRef" :model="queryParams" :inline="true">
               <el-form-item :label="t('category.name')" prop="name">
                 <el-input
                   v-model="queryParams.name"
                   :placeholder="t('category.name')"
                   clearable
                   @keyup.enter="handleQuery"
                 />
               </el-form-item>
                
               
               <el-form-item>
                 <el-button type="primary" @click="handleQuery()"><i-ep-search />{{ t('common.search') }}</el-button>
                 <el-button @click="queryRest()"><i-ep-refresh />{{ t('common.reset') }}</el-button>
               </el-form-item>
             </el-form>
           </div>
           
           
           <el-row :gutter="10" class="mb8">
                    <el-col :span="1.5">
                       <el-button
                          type="primary"
                          plain
                          :icon="Plus"
                          v-if="!isRoot"
                          @click="handleAdd">{{ t('common.add') }}</el-button>
                    </el-col>
                    <el-col :span="1.5">
                       <el-button
                          type="success"
                          plain
                         icon="icon-edit"
                         :disabled="single"
                         v-if="!isRoot"
                         @click="handlerUpdate()"
                       >{{ t('common.modi') }}</el-button>
                    </el-col>
                    
                    <el-col :span="1.5">
                        <el-button
                           type="danger"
                           plain
                           icon="icon-delete-themes"
                           :disabled="multiple"
                           @click="handlerDelete()"
                           v-if="!isRoot"
                        >{{ t('common.remove') }}</el-button>
                     </el-col>
                      
                 
                  
                 </el-row>
           
                  
           <!--表格显示数据 -->
           <el-table v-loading="loading" :data="rows" @selection-change="handleSelectionChange" >
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column :label="t('common.id')" align="center" prop="id" width="80" />
                <el-table-column :label="t('category.merchantName')" align="center" prop="merchantName" />
                
                <el-table-column :label="t('category.name')" align="center" prop="name" />
                
                <el-table-column :label="t('category.picture')" align="center"  width="200">  
                  <template #default="scope">
                     <img :src="scope.row.picture"  width="150">            
                  </template>     
                </el-table-column> 
                
                <el-table-column :label="t('common.createTime')" align="center" prop="createTime" />
               
                <el-table-column v-if="!isRoot" :label="t('common.operate')" width="250" align="center" class-name="small-padding fixed-width">
                   <template #default="scope">
                      <el-button link type="primary" icon="icon-edit"  @click="handlerUpdate(scope.row)"  >{{t('common.modi')}}</el-button>
                                        
                      <el-button link type="primary" icon="icon-delete-themes"  @click="handlerDelete(scope.row)" >{{t('common.remove')}}</el-button>
                   </template>
                </el-table-column>
             </el-table>
               
              <el-pagination
                   v-if="total>0"
                   v-model:current-page="queryParams.page"
                   v-model:page-size="queryParams.size"
                   :page-sizes="[10, 20, 30, 40,50,100]"
                   small="small"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                 /> 
           
         </el-col>
       </el-row>
       
       
       
      <!-- 添加或修改岗位对话框 -->
         <el-dialog :title="title" v-model="open" width="700px" append-to-body :close-on-click-modal="false" @closed="reset">
            <el-form ref="postRef" :model="form"   label-width="80px">
                <el-form-item   :label="t('category.name')" prop="name"  :rules="[{ required: true, message: t('common.required'), trigger: 'blur' }]">
                   <el-input v-model="form.name" :placeholder="t('category.name')" />
                </el-form-item>
                
                 <el-form-item :label="t('category.picture')" prop="picture" :rules="[{ required: true, message: t('common.required'), trigger: 'blur' }]">
                   <el-upload
                       class="avatar-uploader"
                       :action="imageUploadUrl"
                       :headers="header"
                       :show-file-list="false"
                       :on-success="handleAvatarSuccess"
                       :before-upload="beforeAvatarUpload"
                     >
                       <img v-if="form.picture" :src="form.picture" class="avatar" width="175" />
                       <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                     </el-upload>
                 </el-form-item> 
               
             </el-form>
          <template #footer>
             <div class="dialog-footer">
                <el-button type="primary" @click="submitForm">{{ t('btn.confirm') }}</el-button>
                <el-button @click="cancelForm">{{ t('btn.cancel') }}</el-button>
             </div>
          </template>
       </el-dialog> 
        
       
       
       
       
       
     </div>
  </div>
</template>

<script setup>
  import { ref} from 'vue'
  import { Plus } from '@element-plus/icons-vue' 
  import { ElMessage } from 'element-plus'
  import store from '@/store/index.js'
  //定义国际化的语言的文件
  import { useI18n } from 'vue-i18n';
  const { t } = useI18n();
  //图片上传地址
  const imageUploadUrl =ref(process.env.VUE_APP_BASE_API+'/api/upload/image')
  //引用自己的组件
  import merchant from '@/components/Merchant/index.vue'
  
  //组合式函数(代码重复的问题)
  import { usePage } from '@/composables/PageComp.js'
  import { useAddAndEdit } from '@/composables/AddAndEditComp.js'
  const { proxy } = getCurrentInstance(); 
  import {dataApi, addApi, updateApi ,findByIdApi, removeApi} from '@/api/categoryclass.js'
  
  //通用数据必须要有的
  const reactiveObject = ref({
     dataApi: dataApi,
     addApi: addApi,
     updateApi: updateApi,
     findByIdApi: findByIdApi,
     removeApi: removeApi,
     proxy: proxy,
     //这里要变，主键名称
     primaryKey: 'id'
    }); 
  
  //分页查询
  const { loading, total,rows ,queryParams,ids,single,multiple , handleQuery, resetQuery, handleSizeChange , handleCurrentChange, getList,handleSelectionChange }=usePage(reactiveObject)
  
  //新增和修改
  const { open,title,form,reset,cancelForm,submitForm,handlerUpdate,handleAdd ,beforeAvatarUpload ,handlerDelete}=useAddAndEdit(reactiveObject)
  
  //是不是管理员
  const isRoot = computed(() => {
    return store.getters['user/permissions'].includes("admin");
  });
  
  //自己的定义额外参数
  const data = reactive({
    header: {
      'Authorization': store.getters['user/accessToken']
    },
  });
  
  ///自己的定义额外参数,用来使用的
  const { header} = toRefs(data);
  
  //选择商家查看详情
  function chooseCallback(row){ 
    //更改查询条件
    queryParams.value.merchantId= row.id
    handleQuery()
  }
  
  //查询重置
  function queryRest(){
    queryParams.value.merchantId= undefined
    resetQuery()
  }
  
  function handleAvatarSuccess(res, file) {
    if(res.code===200){
       form.value.picture= res.data.image_url
    }else{
       ElMessage.error( res.msg);
    } 
   } 
   
</script>

<style>
</style>
